import {
    ActionType,
    FooterToolbar,
    PageContainer,
    ProDescriptions,
    ProDescriptionsItemProps,
    ProTable,
} from '@ant-design/pro-components';
import {Avatar, Button, Divider, Drawer, message, Tooltip} from 'antd';
import React, {useRef, useState} from 'react';

import {msgSearchMsg} from "@/services/message/MessageController";
import {formatToDate, formatToDateTime} from "@/utils/dateUtil";
import styles from './index.less'




const UserMessage: React.FC<unknown> = () => {

    const actionRef = useRef<ActionType>();
    const [row, setRow] = useState<API.UserInfo>();
    const [selectedRowsState, setSelectedRows] = useState<API.UserInfo[]>([]);
    const columns: ProDescriptionsItemProps[] = [
        {
            title: '序号',
            dataIndex: 'index',
            align: "center",
            search: false,
            render: (text, record, index) => <span>{index + 1}</span>,
        },

    /*    {
            title: '群头像',
            dataIndex: 'groupFaceURL',
            valueType: 'text',
            search: false,
            align: "center",
            render: (text) => <Avatar src={text}/>,

        }, */{
            title: '群名称',
            dataIndex: 'groupName',
            valueType: 'text',
            search: false,
            align: "center",

        },

        {
            title: '消息内容',
            dataIndex: 'content',
            valueType: 'text',
            align: "center",
            search: false,
            render: (text, record, index) =>   <Tooltip placement="top" title={text} arrow={true}>
                <div className={styles['overflow-ellipsis']}>{text}</div>
            </Tooltip>

        },
        {
            title: '群组ID',
            dataIndex: 'groupID',
            valueType: 'text',
            align: "center",

        },
        {
            title: '群人数',
            dataIndex: 'groupMemberCount',
            valueType: 'text',
            search: false,
            align: "center",
        },
        {
            title: '群主ID',
            dataIndex: 'groupOwner',
            valueType: 'text',
            search: false,
            align: "center",
        },

        {
            title: '时间',
            dataIndex: 'sendTime',
            align: "center",
            valueType: 'date',
            render: (text, record, index) => {
                return formatToDateTime(record.sendTime);
            },
        },

        {
            title: '操作',
            dataIndex: 'option',
            valueType: 'option',
            align: "center",
            render: (_, record) => (
                <>
                    {record.contentType === 2101 ? <span>撤回</span>:<a>撤回</a>}
                </>
            ),
        },
    ];
    return (
        <PageContainer
            header={{
                title: '用户消息',
            }}
        >
            <ProTable<API.UserInfo>
                headerTitle=""
                actionRef={actionRef}
                rowKey="userID"
                search={true}
                request={async (params, sorter, filter) => {
                    let sendTime = params.sendTime;
                    let groupID = params.groupID;
                    let pagination = {
                        pageNumber: params.current,
                        showNumber: params.pageSize,
                    };
                    const {errCode, errMsg, errDlt, data} = await msgSearchMsg(sendTime,groupID,3, pagination);
                    return {
                        data: data.chatLogs || [],
                        success: true,
                        total: data.chatLogsNum
                    };
                }}
                pagination={{
                    pageSize: 10,
                    // showSizeChanger: true,
                    onChange: (page) => console.log(page),
                }}
                columns={columns}
                rowSelection={{
                    onChange: (_, selectedRows) => setSelectedRows(selectedRows),
                }}

            />
            {selectedRowsState?.length > 0 && (
                <FooterToolbar
                    extra={
                        <div>
                            已选择{' '}
                            <a style={{fontWeight: 600}}>{selectedRowsState.length}</a>{' '}
                            项&nbsp;&nbsp;
                        </div>
                    }
                >
                    {/* <Button
                        onClick={async () => {
                            await handleRemove(selectedRowsState);
                            setSelectedRows([]);
                            actionRef.current?.reloadAndRest?.();
                        }}
                    >
                        批量删除
                    </Button>
                    <Button type="primary">批量审批</Button>*/}
                </FooterToolbar>
            )}


            <Drawer
                width={600}
                open={!!row}
                onClose={() => {
                    setRow(undefined);
                }}
                closable={false}
            >
                {row?.name && (
                    <ProDescriptions<API.UserInfo>
                        column={2}
                        title={row?.name}
                        request={async () => ({
                            data: row || {},
                        })}
                        params={{
                            id: row?.name,
                        }}
                        columns={columns}
                    />
                )}
            </Drawer>
        </PageContainer>
    );
};

export default UserMessage;
